<template>
	<view>
		<view class="content" @touchstart="hideDrawer">
			<scroll-view class="msg-list" scroll-y="true" :scroll-with-animation="scrollAnimation"
				:scroll-top="scrollTop" :scroll-into-view="scrollToView" @scrolltoupper="loadHistory"
				upper-threshold="50">
				<!-- 加载历史数据waitingUI -->
				<view class="loading">
					<view class="spinner">
						<view class="rect1"></view>
						<view class="rect2"></view>
						<view class="rect3"></view>
						<view class="rect4"></view>
						<view class="rect5"></view>
					</view>
				</view>
				<view class="row" v-for="(row,index) in msgList" :key="index" :id="'msg'+row.msg.id">
					<!-- 系统消息 -->
					<block v-if="row.type=='system'">
						<view class="system">
							<!-- 文字消息 -->
							<view v-if="row.msg.type=='text'" class="text">
								{{row.msg.content.text}}
							</view>
							<!-- 领取红包消息 -->
							<view v-if="row.msg.type=='redEnvelope'" class="red-envelope">
								<image :src="envelope"></image>
								{{row.msg.content.text}}
							</view>
						</view>
					</block>

					<!-- 用户消息 -->
					<block v-if="row.type=='user'">
						<!-- 自己发出的消息 -->
						<view class="my" v-if="row.msg.userinfo.uid==myuid">
							<!-- 左-消息 -->
							<view class="left">
								<!-- 文字消息 -->
								<view v-if="row.msg.type=='text'" class="bubble">
									<rich-text :nodes="row.msg.content.text"></rich-text>
								</view>
								<!-- 语言消息 -->
								<view v-if="row.msg.type=='voice'" class="bubble voice" @tap="playVoice(row.msg)"
									:class="playMsgid == row.msg.id?'play':''">
									<view class="length">{{row.msg.content.length}}</view>
									<view class="icon my-voice"></view>
								</view>
								<!-- 图片消息 -->
								<view v-if="row.msg.type=='img'" class="bubble img" @tap="showPic(row.msg)">
									<image :src="row.msg.content.url"
										:style="{'width': row.msg.content.w+'px','height': row.msg.content.h+'px'}">
									</image>
								</view>
								<!-- 红包 -->
								<view v-if="row.msg.type=='redEnvelope'" class="bubble red-envelope"
									@tap="openRedEnvelope(row.msg,index)">
									<image :src="redEnvelope"></image>
									<view class="tis">
										<!-- 点击开红包 -->
									</view>
									<view class="blessing">
										{{row.msg.content.blessing}}
									</view>
								</view>

							</view>
							<!-- 右-头像 -->
							<view class="right">
								<image :src="row.msg.userinfo.face"></image>
							</view>
						</view>
						<!-- 别人发出的消息 -->
						<view class="other" v-if="row.msg.userinfo.uid!=myuid">
							<!-- 左-头像 -->
							<view class="left">
								<image :src="row.msg.userinfo.face"></image>
							</view>
							<!-- 右-用户名称-时间-消息 -->
							<view class="right">
								<view class="username">
									<view class="name">{{row.msg.userinfo.username}}</view>
									<view class="time">{{row.msg.time}}</view>
								</view>
								<!-- 文字消息 -->
								<view v-if="row.msg.type=='text'" class="bubble">
									<rich-text :nodes="row.msg.content.text"></rich-text>
								</view>
								<!-- 语音消息 -->
								<view v-if="row.msg.type=='voice'" class="bubble voice" @tap="playVoice(row.msg)"
									:class="playMsgid == row.msg.id?'play':''">
									<view class="icon other-voice"></view>
									<view class="length">{{row.msg.content.length}}</view>
								</view>
								<!-- 图片消息 -->
								<view v-if="row.msg.type=='img'" class="bubble img" @tap="showPic(row.msg)">
									<image :src="row.msg.content.url"
										:style="{'width': row.msg.content.w+'px','height': row.msg.content.h+'px'}">
									</image>
								</view>
								<!-- 红包 -->
								<view v-if="row.msg.type=='redEnvelope'" class="bubble red-envelope"
									@tap="openRedEnvelope(row.msg,index)">
									<image :src="redEnvelope"></image>
									<view class="tis">
										<!-- 点击开红包 -->
									</view>
									<view class="blessing">
										{{row.msg.content.blessing}}
									</view>
								</view>
							</view>
						</view>
					</block>
				</view>
			</scroll-view>
		</view>
		<!-- 抽屉栏 -->
		<view class="popup-layer" :class="popupLayerClass" @touchmove.stop.prevent="discard">
			<!-- 表情 -->
			<swiper class="emoji-swiper" :class="{hidden:hideEmoji}" indicator-dots="true" duration="150">
				<swiper-item v-for="(page,pid) in emojiList" :key="pid">
					<view v-for="(em,eid) in page" :key="eid" @tap="addEmoji(em)">

						<image mode="widthFix" :src="'../../static/img/emoji/'+em.url"></image>
					</view>
				</swiper-item>
			</swiper>
			<!-- 更多功能 相册-拍照-红包 -->
			<view class="more-layer" :class="{hidden:hideMore}">
				<view class="list">
					<view class="box" @tap="chooseImage">
						<view class="icon tupian2"></view>
					</view>
					<view class="box" @tap="camera">
						<view class="icon paizhao"></view>
					</view>
					<!-- 	<view class="box" @tap="handRedEnvelopes">
						<view class="icon hongbao"></view>
					</view> -->
				</view>
			</view>
		</view>
		<!-- 底部输入栏 -->
		<view class="input-box" :class="popupLayerClass" @touchmove.stop.prevent="discard">
			<!-- H5下不能录音，输入栏布局改动一下 -->
			<!-- #ifndef H5 -->
		<!-- 	<view class="voice">
				<view class="icon" :class="isVoice?'jianpan':'yuyin'" @tap="switchVoice"></view>
			</view> -->
			<!-- #endif -->
			
			<view class="more" @tap="showMore">
				<view class="icon add"></view>
			</view>
			
			<view class="textbox">
				<view class="voice-mode" :class="[isVoice?'':'hidden',recording?'recording':'']"
					@touchstart="voiceBegin" @touchmove.stop.prevent="voiceIng" @touchend="voiceEnd"
					@touchcancel="voiceCancel">{{voiceTis}}</view>
				<view class="text-mode" :class="isVoice?'hidden':''">
					<view class="box">
						<textarea auto-height="true" v-model="textMsg" @focus="textareaFocus" />
					</view>
					<view class="em" @tap="chooseEmoji">
						<view class="icon biaoqing"></view>
					</view>
				</view>
			</view>
			<!-- #ifndef H5 -->
		<!-- 	<view class="more" @tap="showMore">
				<view class="icon add"></view>
			</view> -->
			<!-- #endif -->
			<view class="send" style="margin-left: 10rpx;" :class="isVoice?'hidden':''" @tap="sendText">
				<view class="btn">发送</view>
			</view>
		</view>
		<!-- 录音UI效果 -->
		<view class="record" :class="recording?'':'hidden'">
			<view class="ing" :class="willStop?'hidden':''">
				<view class="icon luyin2"></view>
			</view>
			<view class="cancel" :class="willStop?'':'hidden'">
				<view class="icon chehui"></view>
			</view>
			<view class="tis" :class="willStop?'change':''">{{recordTis}}</view>
		</view>
		<!-- 红包弹窗 -->
		<view class="windows" :class="windowsState">
			<!-- 遮罩层 -->
			<view class="mask" @touchmove.stop.prevent="discard" @tap="closeRedEnvelope"></view>
			<view class="layer" @touchmove.stop.prevent="discard">
				<view class="open-redenvelope">
					<view class="top">
						<view class="close-btn">
							<view class="icon close" @tap="closeRedEnvelope"></view>
						</view>
						<image src="/static/img/im/face/face_1.jpg"></image>
					</view>
					<view class="from">来自{{redenvelopeData.from}}</view>
					<view class="blessing">{{redenvelopeData.blessing}}</view>
					<view class="money">{{redenvelopeData.money}}</view>
					<view class="showDetails" @tap="toDetails(redenvelopeData.rid)">
						查看领取详情 <view class="icon to"></view>
					</view>
				</view>
			</view>

		</view>
		<sunui-popup ref="organizeTeamPopup">
			<template v-slot:content>

				<view class="serviceItemsContain ">

					<view class="flex-between">
						<view class="flex-start-center">
							<image class="avatar" :src="userInfoData.avatar" mode=""></image>
							<view class="margin-left_20rpx">
								<view class="font-weight " style="margin-bottom: 10rpx;">
									{{userInfoData.nickname}}
								</view>

								<view class="font-overflow" style="width: 500rpx;">
									<text style="margin-right: 10rpx;color: #666666;">{{userInfoData.introduce}}</text>

								</view>

							</view>
						</view>
						<uni-icons @click='closeFn()' class="uniIcon margin-bottom_50rpx" type="clear" size="30"
							style="color: #07070791;">
						</uni-icons>
					</view>
					<view class="flex-between margin-top_20rpx">
						<scroll-view @scrolltolower="nextPage" scroll-view scroll-with-animation='true'
							class="scroll-view_H" scroll-x="true">
							<view id="im_0" class="bottom"></view>
							<block v-for="(item,i) in userInfoData.img" :key="i">
								<view class="scroll-view-item_H  flex-column" @click="imgScare(userInfoData.img,2,i)">
									<image class="albumIcon" :src="item" mode="aspectFill"></image>

								</view>

							</block>

						</scroll-view>
						<view class="viewMore flex " @click.stop="ViewMoreFn(userInfoData.id)">
							<text>查看更多</text>
						</view>
					</view>
				</view>
			</template>
		</sunui-popup>
	</view>
</template>
<script>
	// import Socket from '@/utils/socket1.js';

	export default {


		data() {
			return {
				exitState:'',
				redEnvelope: this.$img.redEnvelope,
				envelope: this.$img.envelope,
				//文字消息
				textMsg: '',
				//消息列表
				isHistoryLoading: false,
				scrollAnimation: false,
				scrollTop: 0,
				scrollToView: '',
				msgList: [],
				msgImgList: [],
				uid: '',
				myuid: uni.getStorageSync("userInfo").id,
				openid: uni.getStorageSync("openid"),
				userInfo: uni.getStorageSync("userInfo"),
				//录音相关参数
				// #ifndef H5
				//H5不能录音
				RECORDER: uni.getRecorderManager(),
				// #endif
				isVoice: false,
				voiceTis: '按住 说话',
				recordTis: "手指上滑 取消发送",
				recording: false,
				willStop: false,
				initPoint: {
					identifier: 0,
					Y: 0
				},
				recordTimer: null,
				recordLength: 0,

				//播放语音相关参数
				AUDIO: uni.createInnerAudioContext(),
				playMsgid: null,
				VoiceTimer: null,
				// 抽屉参数
				popupLayerClass: '',
				// more参数
				hideMore: true,
				//表情定义
				hideEmoji: true,
				socket1: null,
				emojiList: [
					[{
						"url": "100.gif",
						alt: "[微笑]"
					}, {
						"url": "101.gif",
						alt: "[伤心]"
					}, {
						"url": "102.gif",
						alt: "[美女]"
					}, {
						"url": "103.gif",
						alt: "[发呆]"
					}, {
						"url": "104.gif",
						alt: "[墨镜]"
					}, {
						"url": "105.gif",
						alt: "[哭]"
					}, {
						"url": "106.gif",
						alt: "[羞]"
					}, {
						"url": "107.gif",
						alt: "[哑]"
					}, {
						"url": "108.gif",
						alt: "[睡]"
					}, {
						"url": "109.gif",
						alt: "[哭]"
					}, {
						"url": "110.gif",
						alt: "[囧]"
					}, {
						"url": "111.gif",
						alt: "[怒]"
					}, {
						"url": "112.gif",
						alt: "[调皮]"
					}, {
						"url": "113.gif",
						alt: "[笑]"
					}, {
						"url": "114.gif",
						alt: "[惊讶]"
					}, {
						"url": "115.gif",
						alt: "[难过]"
					}, {
						"url": "116.gif",
						alt: "[酷]"
					}, {
						"url": "117.gif",
						alt: "[汗]"
					}, {
						"url": "118.gif",
						alt: "[抓狂]"
					}, {
						"url": "119.gif",
						alt: "[吐]"
					}, {
						"url": "120.gif",
						alt: "[笑]"
					}, {
						"url": "121.gif",
						alt: "[快乐]"
					}, {
						"url": "122.gif",
						alt: "[奇]"
					}, {
						"url": "123.gif",
						alt: "[傲]"
					}],
					[{
						"url": "124.gif",
						alt: "[饿]"
					}, {
						"url": "125.gif",
						alt: "[累]"
					}, {
						"url": "126.gif",
						alt: "[吓]"
					}, {
						"url": "127.gif",
						alt: "[汗]"
					}, {
						"url": "128.gif",
						alt: "[高兴]"
					}, {
						"url": "129.gif",
						alt: "[闲]"
					}, {
						"url": "130.gif",
						alt: "[努力]"
					}, {
						"url": "131.gif",
						alt: "[骂]"
					}, {
						"url": "132.gif",
						alt: "[疑问]"
					}, {
						"url": "133.gif",
						alt: "[秘密]"
					}, {
						"url": "134.gif",
						alt: "[乱]"
					}, {
						"url": "135.gif",
						alt: "[疯]"
					}, {
						"url": "136.gif",
						alt: "[哀]"
					}, {
						"url": "137.gif",
						alt: "[鬼]"
					}, {
						"url": "138.gif",
						alt: "[打击]"
					}, {
						"url": "139.gif",
						alt: "[bye]"
					}, {
						"url": "140.gif",
						alt: "[汗]"
					}, {
						"url": "141.gif",
						alt: "[抠]"
					}, {
						"url": "142.gif",
						alt: "[鼓掌]"
					}, {
						"url": "143.gif",
						alt: "[糟糕]"
					}, {
						"url": "144.gif",
						alt: "[恶搞]"
					}, {
						"url": "145.gif",
						alt: "[什么]"
					}, {
						"url": "146.gif",
						alt: "[什么]"
					}, {
						"url": "147.gif",
						alt: "[累]"
					}],
					[{
						"url": "148.gif",
						alt: "[看]"
					}, {
						"url": "149.gif",
						alt: "[难过]"
					}, {
						"url": "150.gif",
						alt: "[难过]"
					}, {
						"url": "151.gif",
						alt: "[坏]"
					}, {
						"url": "152.gif",
						alt: "[亲]"
					}, {
						"url": "153.gif",
						alt: "[吓]"
					}, {
						"url": "154.gif",
						alt: "[可怜]"
					}, {
						"url": "155.gif",
						alt: "[刀]"
					}, {
						"url": "156.gif",
						alt: "[水果]"
					}, {
						"url": "157.gif",
						alt: "[酒]"
					}, {
						"url": "158.gif",
						alt: "[篮球]"
					}, {
						"url": "159.gif",
						alt: "[乒乓]"
					}, {
						"url": "160.gif",
						alt: "[咖啡]"
					}, {
						"url": "161.gif",
						alt: "[美食]"
					}, {
						"url": "162.gif",
						alt: "[动物]"
					}, {
						"url": "163.gif",
						alt: "[鲜花]"
					}, {
						"url": "164.gif",
						alt: "[枯]"
					}, {
						"url": "165.gif",
						alt: "[唇]"
					}, {
						"url": "166.gif",
						alt: "[爱]"
					}, {
						"url": "167.gif",
						alt: "[分手]"
					}, {
						"url": "168.gif",
						alt: "[生日]"
					}, {
						"url": "169.gif",
						alt: "[电]"
					}, {
						"url": "170.gif",
						alt: "[炸弹]"
					}, {
						"url": "171.gif",
						alt: "[刀子]"
					}],
					[{
						"url": "172.gif",
						alt: "[足球]"
					}, {
						"url": "173.gif",
						alt: "[瓢虫]"
					}, {
						"url": "174.gif",
						alt: "[翔]"
					}, {
						"url": "175.gif",
						alt: "[月亮]"
					}, {
						"url": "176.gif",
						alt: "[太阳]"
					}, {
						"url": "177.gif",
						alt: "[礼物]"
					}, {
						"url": "178.gif",
						alt: "[抱抱]"
					}, {
						"url": "179.gif",
						alt: "[拇指]"
					}, {
						"url": "180.gif",
						alt: "[贬低]"
					}, {
						"url": "181.gif",
						alt: "[握手]"
					}, {
						"url": "182.gif",
						alt: "[剪刀手]"
					}, {
						"url": "183.gif",
						alt: "[抱拳]"
					}, {
						"url": "184.gif",
						alt: "[勾引]"
					}, {
						"url": "185.gif",
						alt: "[拳头]"
					}, {
						"url": "186.gif",
						alt: "[小拇指]"
					}, {
						"url": "187.gif",
						alt: "[拇指八]"
					}, {
						"url": "188.gif",
						alt: "[食指]"
					}, {
						"url": "189.gif",
						alt: "[ok]"
					}, {
						"url": "190.gif",
						alt: "[情侣]"
					}, {
						"url": "191.gif",
						alt: "[爱心]"
					}, {
						"url": "192.gif",
						alt: "[蹦哒]"
					}, {
						"url": "193.gif",
						alt: "[颤抖]"
					}, {
						"url": "194.gif",
						alt: "[怄气]"
					}, {
						"url": "195.gif",
						alt: "[跳舞]"
					}],
					[{
						"url": "196.gif",
						alt: "[发呆]"
					}, {
						"url": "197.gif",
						alt: "[背着]"
					}, {
						"url": "198.gif",
						alt: "[伸手]"
					}, {
						"url": "199.gif",
						alt: "[耍帅]"
					}, {
						"url": "200.png",
						alt: "[微笑]"
					}, {
						"url": "201.png",
						alt: "[生病]"
					}, {
						"url": "202.png",
						alt: "[哭泣]"
					}, {
						"url": "203.png",
						alt: "[吐舌]"
					}, {
						"url": "204.png",
						alt: "[迷糊]"
					}, {
						"url": "205.png",
						alt: "[瞪眼]"
					}, {
						"url": "206.png",
						alt: "[恐怖]"
					}, {
						"url": "207.png",
						alt: "[忧愁]"
					}, {
						"url": "208.png",
						alt: "[眨眉]"
					}, {
						"url": "209.png",
						alt: "[闭眼]"
					}, {
						"url": "210.png",
						alt: "[鄙视]"
					}, {
						"url": "211.png",
						alt: "[阴暗]"
					}, {
						"url": "212.png",
						alt: "[小鬼]"
					}, {
						"url": "213.png",
						alt: "[礼物]"
					}, {
						"url": "214.png",
						alt: "[拜佛]"
					}, {
						"url": "215.png",
						alt: "[力量]"
					}, {
						"url": "216.png",
						alt: "[金钱]"
					}, {
						"url": "217.png",
						alt: "[蛋糕]"
					}, {
						"url": "218.png",
						alt: "[彩带]"
					}, {
						"url": "219.png",
						alt: "[礼物]"
					}, ]
				],
				//表情图片图床名称 ，由于我上传的第三方图床名称会有改变，所以有此数据来做对应，您实际应用中应该不需要
				onlineEmoji: {
					"100.gif": "AbNQgA.gif",
					"101.gif": "AbN3ut.gif",
					"102.gif": "AbNM3d.gif",
					"103.gif": "AbN8DP.gif",
					"104.gif": "AbNljI.gif",
					"105.gif": "AbNtUS.gif",
					"106.gif": "AbNGHf.gif",
					"107.gif": "AbNYE8.gif",
					"108.gif": "AbNaCQ.gif",
					"109.gif": "AbNN4g.gif",
					"110.gif": "AbN0vn.gif",
					"111.gif": "AbNd3j.gif",
					"112.gif": "AbNsbV.gif",
					"113.gif": "AbNwgs.gif",
					"114.gif": "AbNrD0.gif",
					"115.gif": "AbNDuq.gif",
					"116.gif": "AbNg5F.gif",
					"117.gif": "AbN6ET.gif",
					"118.gif": "AbNcUU.gif",
					"119.gif": "AbNRC4.gif",
					"120.gif": "AbNhvR.gif",
					"121.gif": "AbNf29.gif",
					"122.gif": "AbNW8J.gif",
					"123.gif": "AbNob6.gif",
					"124.gif": "AbN5K1.gif",
					"125.gif": "AbNHUO.gif",
					"126.gif": "AbNIDx.gif",
					"127.gif": "AbN7VK.gif",
					"128.gif": "AbNb5D.gif",
					"129.gif": "AbNX2d.gif",
					"130.gif": "AbNLPe.gif",
					"131.gif": "AbNjxA.gif",
					"132.gif": "AbNO8H.gif",
					"133.gif": "AbNxKI.gif",
					"134.gif": "AbNzrt.gif",
					"135.gif": "AbU9Vf.gif",
					"136.gif": "AbUSqP.gif",
					"137.gif": "AbUCa8.gif",
					"138.gif": "AbUkGQ.gif",
					"139.gif": "AbUFPg.gif",
					"140.gif": "AbUPIS.gif",
					"141.gif": "AbUZMn.gif",
					"142.gif": "AbUExs.gif",
					"143.gif": "AbUA2j.gif",
					"144.gif": "AbUMIU.gif",
					"145.gif": "AbUerq.gif",
					"146.gif": "AbUKaT.gif",
					"147.gif": "AbUmq0.gif",
					"148.gif": "AbUuZV.gif",
					"149.gif": "AbUliF.gif",
					"150.gif": "AbU1G4.gif",
					"151.gif": "AbU8z9.gif",
					"152.gif": "AbU3RJ.gif",
					"153.gif": "AbUYs1.gif",
					"154.gif": "AbUJMR.gif",
					"155.gif": "AbUadK.gif",
					"156.gif": "AbUtqx.gif",
					"157.gif": "AbUUZ6.gif",
					"158.gif": "AbUBJe.gif",
					"159.gif": "AbUdIO.gif",
					"160.gif": "AbU0iD.gif",
					"161.gif": "AbUrzd.gif",
					"162.gif": "AbUDRH.gif",
					"163.gif": "AbUyQA.gif",
					"164.gif": "AbUWo8.gif",
					"165.gif": "AbU6sI.gif",
					"166.gif": "AbU2eP.gif",
					"167.gif": "AbUcLt.gif",
					"168.gif": "AbU4Jg.gif",
					"169.gif": "AbURdf.gif",
					"170.gif": "AbUhFS.gif",
					"171.gif": "AbU5WQ.gif",
					"172.gif": "AbULwV.gif",
					"173.gif": "AbUIzj.gif",
					"174.gif": "AbUTQs.gif",
					"175.gif": "AbU7yn.gif",
					"176.gif": "AbUqe0.gif",
					"177.gif": "AbUHLq.gif",
					"178.gif": "AbUOoT.gif",
					"179.gif": "AbUvYF.gif",
					"180.gif": "AbUjFU.gif",
					"181.gif": "AbaSSJ.gif",
					"182.gif": "AbUxW4.gif",
					"183.gif": "AbaCO1.gif",
					"184.gif": "Abapl9.gif",
					"185.gif": "Aba9yR.gif",
					"186.gif": "AbaFw6.gif",
					"187.gif": "Abaiex.gif",
					"188.gif": "AbakTK.gif",
					"189.gif": "AbaZfe.png",
					"190.gif": "AbaEFO.gif",
					"191.gif": "AbaVYD.gif",
					"192.gif": "AbamSH.gif",
					"193.gif": "AbaKOI.gif",
					"194.gif": "Abanld.gif",
					"195.gif": "Abau6A.gif",
					"196.gif": "AbaQmt.gif",
					"197.gif": "Abal0P.gif",
					"198.gif": "AbatpQ.gif",
					"199.gif": "Aba1Tf.gif",
					"200.png": "Aba8k8.png",
					"201.png": "AbaGtS.png",
					"202.png": "AbaJfg.png",
					"203.png": "AbaNlj.png",
					"204.png": "Abawmq.png",
					"205.png": "AbaU6s.png",
					"206.png": "AbaaXn.png",
					"207.png": "Aba000.png",
					"208.png": "AbarkT.png",
					"209.png": "AbastU.png",
					"210.png": "AbaB7V.png",
					"211.png": "Abafn1.png",
					"212.png": "Abacp4.png",
					"213.png": "AbayhF.png",
					"214.png": "Abag1J.png",
					"215.png": "Aba2c9.png",
					"216.png": "AbaRXR.png",
					"217.png": "Aba476.png",
					"218.png": "Abah0x.png",
					"219.png": "Abdg58.png"
				},
				//红包相关参数
				windowsState: '',
				redenvelopeData: {
					rid: null, //红包ID
					from: null,
					face: null,
					blessing: null,
					money: null
				},
				client_id: '',
				returnData: '',
				imgWidth: '',
				imgHeight: '',
				messageList: [],
				count: 0,
				queryobj: {

					page: 1,
					// 每页显示多少条数据
					limit: 10
				},
				userInfoData: {},
				currency_name: uni.getStorageSync("system").currency_name,
				isAndroid: true
			};
		},
		onLoad(option) {



			this.uid = option.uid

			if (option.uid) {
				this.chatMessageLisFn(option.uid)
				this.initUserinfo(option.uid)

				setTimeout(() => {
					this.getMsgList();
				}, 500)

			}
			// var prevExitState = this.exitState // 尝试获得上一次退出前 onSaveExitState 保存的数据
			// if (prevExitState !== undefined) { // 如果是根据 restartStrategy 配置进行的冷启动，就可以获取到
			// 	// prevExitState.myDataField === 'myData'
				
			// 	console.log(prevExitState,'测试')
			// }

			//语音自然播放结束
			this.AUDIO.onEnded((res) => {
				this.playMsgid = null;
			});
			// #ifndef H5
			//录音开始事件
			this.RECORDER.onStart((e) => {
				this.recordBegin(e);
			})
			//录音结束事件
			this.RECORDER.onStop((e) => {
				this.recordEnd(e);
			})

			// #endif
			wx.getSystemInfo({
				success: (res) => {
					let platform = res.system;

					if (platform.indexOf('Android') !== -1) {
						this.isAndroid = true

						console.log('用户使用安卓设备');

					} else if (platform.indexOf('iOS') !== -1) {
						this.isAndroid = false
						// uni.showModal({
						// 	title: '提示',
						// 	content: '是否跳转到联系我们页面',
						// 	success: async (res) => {
						// 		if (res.confirm) {
						//              this.$sun.navGo('/pagesA/personalCenter/contactUs')

						// 		} else if (res.cancel) {

						// 		}
						// 	}
						// });
						console.log('用户使用苹果设备');
					}
				}
			});
			this.$nextTick(() => {
			
				// 初始化ws 
				this.$websocket.initWebsocket()
			
				// 设置回调
				this.$websocket.setCallback((data) => {
					// 收到消息时的回调逻辑
					console.log(data)
					if (data.client_id) {
						this.client_id = data.client_id
						this.bindUser()
					} else {
						var nowDate = new Date();
						let lastid
						this.returnData = JSON.parse(JSON.stringify(data))
						console.log(this.returnData)
						setTimeout(() => {
							let msg
							if (this.msgList.length) {
								lastid = this.msgList[this.msgList.length - 1].msg.id;
							}
			
			
							lastid++;
							if (this.returnData.type == 'text') {
								msg = {
									type: 'user',
									msg: {
										id: lastid,
										time: nowDate.getHours() + ":" + nowDate.getMinutes(),
										type: this.returnData.type,
										userinfo: {
											uid: this.returnData.from,
											username: this.returnData.nickname,
											face: this.returnData.avatar
										},
										content: {
											text: this.returnData.content
										},
			
			
									}
								}
							} else if (this.returnData.type == 'img') {
								msg = {
									type: 'user',
									msg: {
										id: lastid,
										time: nowDate.getHours() + ":" + nowDate.getMinutes(),
										type: this.returnData.type,
										userinfo: {
											uid: this.returnData.from,
											username: this.returnData.nickname,
											face: this.returnData.avatar
										},
			
			
										content: {
											url: this.returnData.content,
											w: this.returnData.imgWidth ? this.returnData
												.imgWidth : 200,
											h: this.returnData.imgHeight ? this.returnData
												.imgHeight : 200
										}
									}
								}
							} else if (this.returnData.type == 'warning') {
								if (this.isAndroid) {
									uni.showModal({
										title: '提示',
										content: '当前已经没有' + this.currency_name +
											'了请充值后在聊天',
										success: async (res) => {
											if (res.confirm) {
												this.$sun.navTo(
													'/pagesA/personalCenter/onlineRecharge'
												)
			
											} else if (res.cancel) {
			
											}
										}
									});
								} else {
									uni.showModal({
										title: '提示',
										content: '当前已经没有' + this.currency_name +
											'了请联系客服充值后在聊天',
										success: async (res) => {
											if (res.confirm) {
												this.$sun.navTo(
													'/pagesA/personalCenter/contactUs'
												)
			
											} else if (res.cancel) {
			
											}
										}
									});
								}
			
			
			
							}
			
							// 本地模拟发送消息
							this.screenMsg(msg);
						}, 300)
			
					}
				})
			
			})


			// if (options.id) {
			// 	this.id = options.id
			// 	this.init(options.id)
			// 	this.tabClassIfyFn()
			// 	this.circleListFn(options.id)

			// }







			// this.socket1 = new Socket('wss://dazi.weijuyunke.cn:2347');
			// //websocket连接调用
			// this.socket1.connect();
			// // 创建WebSocket连接
			// this.socket1.onConnected = () => {
			// 	console.log('WebSocket已连接');
			// };



			//开启心跳检测
			// this.socket.startHeartbeat();
			//接收消息		
			// this.socket1.onMessage = (res) => {
			// 	// console.log('定位');
			// 	const data = JSON.parse(res.data)



			// 	if (data.client_id) {
			// 		this.client_id = data.client_id
			// 		this.bindUser()
			// 	} else {
			// 		var nowDate = new Date();
			// 		let lastid
			// 		this.returnData = JSON.parse(JSON.stringify(data))
			// 		console.log(this.returnData)
			// 		setTimeout(() => {
			// 			let msg
			// 			if(this.msgList.length){
			// 			lastid	= this.msgList[this.msgList.length - 1].msg.id;
			// 			}else{
			// 			 lastid=1
			// 			}


			// 			lastid++;
			// 			if (this.returnData.type == 'text') {
			// 				msg = {
			// 					type: 'user',
			// 					msg: {
			// 						id: lastid,
			// 						time: nowDate.getHours() + ":" + nowDate.getMinutes(),
			// 						type: this.returnData.type,
			// 						userinfo: {
			// 							uid: this.returnData.from,
			// 							username: this.returnData.nickname,
			// 							face: this.returnData.avatar
			// 						},
			// 						content: {
			// 							text: this.returnData.content
			// 						},


			// 					}
			// 				}
			// 			} else {
			// 				msg = {
			// 					type: 'user',
			// 					msg: {
			// 						id: lastid,
			// 						time: nowDate.getHours() + ":" + nowDate.getMinutes(),
			// 						type: this.returnData.type,
			// 						userinfo: {
			// 							uid: this.returnData.from,
			// 							username: this.returnData.nickname,
			// 							face: this.returnData.avatar
			// 						},


			// 						content: {
			// 							url: this.returnData.content,
			// 							w: this.returnData.imgWidth ? this.returnData.imgWidth : 200,
			// 							h: this.returnData.imgHeight ? this.returnData.imgHeight : 200
			// 						}
			// 					}
			// 				}
			// 			}

			// 			// 本地模拟发送消息
			// 			this.screenMsg(msg);
			// 		}, 3000)

			// 	}

			// 	// if(data.type==3&&this.sessionId==data.data.sessionId){
			// 	// this.msgList.push(data.data)				
			// 	// console.log(data,'服务器消息');	
			// 	// }				  
			// };
			//监听错误信息
			// this.socket1.onError = (error) => {
			// 	console.error('WebSocket错误: ', error);
			// };
			// //监听关闭
			// this.socket1.onClosed = () => {
			// 	console.log('WebSocket已关闭');
			// };

		},
		onShow() {
			this.scrollTop = 9999999;
			this.readChatMessageFn(this.uid)
           
           
			//模板借由本地缓存实现发红包效果，实际应用中请不要使用此方法。
			//
			uni.getStorage({
				key: 'redEnvelopeData',
				success: (res) => {
					console.log(res.data);
					let nowDate = new Date();
					let lastid = this.msgList[this.msgList.length - 1].msg.id;
					lastid++;
					let row = {
						type: "user",
						msg: {
							id: lastid,
							type: "redEnvelope",
							time: nowDate.getHours() + ":" + nowDate.getMinutes(),
							userinfo: {
								uid: 0,
								username: "大黑哥",
								face: "/static/img/face.jpg"
							},
							content: {
								blessing: res.data.blessing,
								rid: Math.floor(Math.random() * 1000 + 1),
								isReceived: false
							}
						}
					};
					this.screenMsg(row);
					uni.removeStorage({
						key: 'redEnvelopeData'
					});
				}
			});
		},
		onSaveExitState: function() {
			var exitState = {
				myDataField: 'myData'
			} // 需要保存的数据
			return {
				data: exitState,
				expireTimeStamp: Date.now() + 24 * 60 * 60 * 1000 // 超时时刻
			}
		},
		onUnload() {

			// this.$websocket.disconnect()
			//停止心跳检测
			// this.socket1.stopHeartbeat()
			// //退出页面关闭websocket
			// this.socket1.close({
			// 	success(res) {

			// 		console.log("关闭成功", res)
			// 	},
			// 	fail(err) {
			// 		console.log("关闭失败", err)
			// 	}
			// })
		},
		computed: {

			// 订单状态 '1 待审核 2 上架中 3 下架 4 驳回',
			strStatusFn: function() {
				return function(str) {
					let regex = /\d{2}-\d{2} \d{2}:\d{2}/;
					let extracted = str.match(regex);
					if (extracted) {
						return extracted[0];

					} else {
						return '未找到匹配的时间格式'

					}


				};
			},
		},
		methods: {
			async readChatMessageFn(uid) {
			  if(uid){
				  const result = await this.$http.post({
				  	url: this.$api.readChatMessage,
				  	data: {
				  			
				  		uid: uid
				  			
				  			
				  			
				  	},
				  	headers: {
				  		'Authorization': this.userInfo.token
				  	}
				  			
				  })
				  			
				  			
				  if (result.code == 0) {
				  			
				     this.$nextTick(()=>{
						 // this.$websocket.initWebsocket()
						  this.chatMessageLisFn(this.uid)
						 // 设置回调
						 // this.$websocket.setCallback((data) => {
						 // 	// 收到消息时的回调逻辑
						 // 	console.log(data)
						 // 	if (data.client_id) {
						 // 		this.client_id = data.client_id
						 // 		this.bindUser()
						 							
						 // 		 this.chatMessageLisFn(this.uid)
						 // 	}
						 // })
					 })
				  	
				  			
				  			
				  } else {
				  	this.$sun.toast(result.message, 'none')
				  }
			  }
			},
			async initUserinfo(id) {
				const result = await this.$http.post({
					url: this.$api.userInfo,
					data: {
						id: id

					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})
				if (result.code == 0) {

					this.userInfoData = result.data
					this.initPage()
					if (result.data.img&&result.data.img.includes(',')) {

						// 包含的进行slice(',') 分割

						this.userInfoData.img = result.data.img.split(',').map((item) => item.trim());
					} else {

						if(result.data.img){
							this.userInfoData.img = result.data.img.split();
						}
						// this.userInfoData.img = ['https://n8.weijuyunke.com/2024-06-28/a6939202406281049023506.png',
						// 	'https://n8.weijuyunke.com/2024-06-28/a6939202406281049023506.png',
						// 	'https://n8.weijuyunke.com/2024-06-28/a6939202406281049023506.png',
						// 	'https://n8.weijuyunke.com/2024-06-28/a6939202406281049023506.png',
						// 	'https://n8.weijuyunke.com/2024-06-28/a6939202406281049023506.png'
						// ]

						// ]

					}
					console.log(this.userInfoData)



				} else {

					this.$sun.toast(result.message, 'none')
				}
			},
			async chatMessageLisFn(id) {
				const result = await this.$http.post({
					url: this.$api.chatMessageList,
					data: {
						page: this.queryobj.page,
						limit: this.queryobj.limit,
						uid: id





					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})


				if (result.code == 0) {

					this.count = result.data.count
					this.messageList = result.data.list



				} else {
					this.$sun.toast(result.message, 'none')
				}

			},
			async bindUser() {

				const resPoster = await this.$http.post({
					url: this.$api.bindUser,
					data: {

						type: 'message',
						uid: this.uid,
						client_id: this.client_id


					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})

				if (resPoster.code == 0) {
					console.log(resPoster)
					// this.$sun.toast(resPoster.message, 'none')

				} else {

					this.$sun.toast(resPoster.msg, 'none')
				}

			},
			imgScare(img, len, index) {
				console.log(img)

				if (len == 1) {
					uni.previewImage({
						urls: [img],
						longPressActions: {
							itemList: ['发送给朋友', '保存图片', '收藏'],
							success: function(data) {

							},
							fail: function(err) {

							}
						}
					});
				} else {
					uni.previewImage({
						urls: img,
						current: index,
						longPressActions: {
							itemList: ['发送给朋友', '保存图片', '收藏'],
							success: function(data) {

							},
							fail: function(err) {

							}
						}
					});
				}


			},
			// imgScare(img) {
			// 	console.log(img)
			// 	uni.previewImage({
			// 		urls: [img],
			// 		longPressActions: {
			// 			itemList: ['发送给朋友', '保存图片', '收藏'],
			// 			success: function(data) {
			// 				console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
			// 			},
			// 			fail: function(err) {
			// 				console.log(err.errMsg);
			// 			}
			// 		}
			// 	});


			// },
			ViewMoreFn(id) {
				this.$sun.navGo('/pagesB/index/socialDetails', {
					uid: id
				})
			},
			initPage() {

				if (this.userInfoData.is_authentication == 2) {
					this.$nextTick(() => {

						this.$refs.organizeTeamPopup.show({
							anim: 'top',
							position: 'top',
							shadeClose: false, //false使用户不能点击其它关闭页面
							topclose: false,
							zIndex: 99,
							shade: false
						});
					})
				}
			},
			closeFn() {
				this.$refs.organizeTeamPopup.close();
			},
			// 接受消息(筛选处理)
			screenMsg(msg) {
				console.log(msg, '处理结果')
				//从长连接处转发给这个方法，进行筛选处理
				if (msg.type == 'system') {
					// 系统消息
					switch (msg.msg.type) {
						case 'text':
							this.addSystemTextMsg(msg);
							break;
						case 'redEnvelope':
							this.addSystemRedEnvelopeMsg(msg);
							break;
					}
				} else if (msg.type == 'user') {
					// 用户消息
					switch (msg.msg.type) {
						case 'text':
							this.addTextMsg(msg);
							break;
						case 'voice':
							this.addVoiceMsg(msg);
							break;
						case 'img':
							this.addImgMsg(msg);
							break;
						case 'redEnvelope':
							this.addRedEnvelopeMsg(msg);
							break;
					}
					console.log('用户消息');
					//非自己的消息震动
					if (msg.msg.userinfo.uid != this.myuid) {
						console.log('振动');
						uni.vibrateLong();
					}
				}
				this.$nextTick(function() {
					// 滚动到底
					this.scrollToView = 'msg' + msg.msg.id
				});
			},
			nextPage() {
				// console.log(111)
				// if (this.queryPage.limit * this.queryPage.page >= this.total) {
				// 	return this.$sun.toast('亲 没有更多了~', 'none')
				// } else {
				// 	this.queryPage.page += 1
				// 	// this.init()
				// }
			},
			//触发滑动到顶部(加载历史信息记录)
			loadHistory(e) {



				if (this.queryobj.page * this.queryobj.limit >= this.count) {
					return this.$sun.toast('亲 没有更多了~', 'none')
				} else {
					if (this.isHistoryLoading) {
						return;
					}

					this.isHistoryLoading = true; //参数作为进入请求标识，防止重复请求
					this.scrollAnimation = false; //关闭滑动动画
					let Viewid = this.msgList[0].msg.id; //记住第一个信息ID
					this.queryobj.page += 1
					this.chatMessageLisFn()
					//本地模拟请求历史记录效果
					setTimeout(() => {
						let list = this.messageList.map((item, index) => {
							if (item.type == 'text') {
								return {
									type: "user",
									msg: {
										id: index + 1,
										type: item.type,
										time: item.create_time,
										userinfo: {
											uid: item.send_uid,
											username: item.send_nickname,
											face: item.send_avatar
										},
										content: {
											text: item.content
										}
									}
								}
							} else if (item.type == 'img') {
								return {
									type: "user",
									msg: {
										id: index + 1,
										type: item.type,
										time: item.create_time,
										userinfo: {
											uid: item.send_uid,
											username: item.send_nickname,
											face: item.send_avatar
										},
										content: {
											url: item.content,
											w: item.imgWidth,
											h: item.imgHeight
										}
									}
								}
							}
						})
						// onReachBottom() {
						// 	if (this.queryobj.pagenum * this.queryobj.pagesize >= this.total) {
						// 		return this.$sun.toast('亲 没有更多了~')
						// 	} else {
						// 		this.queryobj.pagenum += 1
						// 		this.getGoodsList()
						// 	}
						// },



						// this.chatMessageLisFn()
						console.log('111')
						// 消息列表
						// let list = [{
						// 		type: "user",
						// 		msg: {
						// 			id: 1,
						// 			type: "text",
						// 			time: "12:56",
						// 			userinfo: {
						// 				uid: 0,
						// 				username: "大黑哥",
						// 				face: "/static/img/face.jpg"
						// 			},
						// 			content: {
						// 				text: "为什么温度会相差那么大？"
						// 			}
						// 		}
						// 	},
						// 	{
						// 		type: "user",
						// 		msg: {
						// 			id: 2,
						// 			type: "text",
						// 			time: "12:57",
						// 			userinfo: {
						// 				uid: 1,
						// 				username: "售后客服008",
						// 				face: "/static/img/im/face/face_2.jpg"
						// 			},
						// 			content: {
						// 				text: "这个是有偏差的，两个温度相差十几二十度是很正常的，如果相差五十度，那即是质量问题了。"
						// 			}
						// 		}
						// 	},
						// 	{
						// 		type: "user",
						// 		msg: {
						// 			id: 3,
						// 			type: "voice",
						// 			time: "12:59",
						// 			userinfo: {
						// 				uid: 1,
						// 				username: "售后客服008",
						// 				face: "/static/img/im/face/face_2.jpg"
						// 			},
						// 			content: {
						// 				url: "/static/voice/1.mp3",
						// 				length: "00:06"
						// 			}
						// 		}
						// 	},
						// 	{
						// 		type: "user",
						// 		msg: {
						// 			id: 4,
						// 			type: "voice",
						// 			time: "13:05",
						// 			userinfo: {
						// 				uid: 0,
						// 				username: "大黑哥",
						// 				face: "/static/img/face.jpg"
						// 			},
						// 			content: {
						// 				url: "/static/voice/2.mp3",
						// 				length: "00:06"
						// 			}
						// 		}
						// 	},
						// ]
						// 获取消息中的图片,并处理显示尺寸
						for (let i = 0; i < list.length; i++) {
							if (list[i].type == 'user' && list[i].msg.type == "img") {
								list[i].msg.content = this.setPicSize(list[i].msg.content);
								this.msgImgList.unshift(list[i].msg.content.url);
							}
							list[i].msg.id = Math.floor(Math.random() * 1000 + 1);
							this.msgList.unshift(list[i]);
						}

						//这段代码很重要，不然每次加载历史数据都会跳到顶部
						this.$nextTick(function() {
							this.scrollToView = 'msg' + Viewid; //跳转上次的第一行信息位置
							this.$nextTick(function() {
								this.scrollAnimation = true; //恢复滚动动画
							});

						});
						this.isHistoryLoading = false;

					}, 1500)
				}

			},
			// 加载初始页面消息
			getMsgList() {
				let list
				if (this.messageList.length) {
					// 消息列表
					console.log(this.messageList)
					list = this.messageList.map((item, index) => {
						if (item.type == 'text') {
							return {
								type: "user",
								msg: {
									id: index + 1,
									type: item.type,
									time: this.strStatusFn(item.create_time),
									userinfo: {
										uid: item.send_uid,
										username: item.send_nickname,
										face: item.send_avatar
									},
									content: {
										text: item.content
									}
								}
							}
						} else if (item.type == 'img') {
							return {
								type: "user",
								msg: {
									id: index + 1,
									type: item.type,
									time: this.strStatusFn(item.create_time),
									userinfo: {
										uid: item.send_uid,
										username: item.send_nickname,
										face: item.send_avatar
									},
									content: {
										url: item.content,
										w: item.imgWidth,
										h: item.imgHeight
									}
								}
							}
						}
					}).reverse();
				} else {
					list = [{
						type: "system",
						msg: {
							id: 1,
							type: "text",
							content: {
								text: "欢迎进入chat聊天室"
							}
						}
					}]
				}


				// let list = [{
				// 		type: "system",
				// 		msg: {
				// 			id: 0,
				// 			type: "text",
				// 			content: {
				// 				text: "欢迎进入HM-chat聊天室"
				// 			}
				// 		}
				// 	},
				// {
				// 						type: "user",
				// 						msg: {
				// 							id: 5,
				// 							type: "img",
				// 							time: "13:05",
				// 							userinfo: {
				// 								uid: 0,
				// 								username: "大黑哥",
				// 								face: "/static/img/face.jpg"
				// 							},
				// 							content: {
				// 								url: "/static/img/p10.jpg",
				// 								w: 200,
				// 								h: 200
				// 							}
				// 						}
				// 					},
				// 					{
				// 						type: "user",
				// 						msg: {
				// 							id: 6,
				// 							type: "img",
				// 							time: "12:59",
				// 							userinfo: {
				// 								uid: 1,
				// 								username: "售后客服008",
				// 								face: "/static/img/im/face/face_2.jpg"
				// 							},
				// 							content: {
				// 								url: "/static/img/q.jpg",
				// 								w: 1920,
				// 								h: 1080
				// 							}
				// 						}
				// 					},
				// 					{
				// 						type: "system",
				// 						msg: {
				// 							id: 7,
				// 							type: "text",
				// 							content: {
				// 								text: "欢迎进入HM-chat聊天室"
				// 							}
				// 						}
				// 					},

				// 					{
				// 						type: "system",
				// 						msg: {
				// 							id: 9,
				// 							type: "redEnvelope",
				// 							content: {
				// 								text: "售后客服008领取了你的红包"
				// 							}
				// 						}
				// 					},
				// 					{
				// 						type: "user",
				// 						msg: {
				// 							id: 10,
				// 							type: "redEnvelope",
				// 							time: "12:56",
				// 							userinfo: {
				// 								uid: 0,
				// 								username: "大黑哥",
				// 								face: "/static/img/face.jpg"
				// 							},
				// 							content: {
				// 								blessing: "恭喜发财，大吉大利，万事如意",
				// 								rid: 0,
				// 								isReceived: false
				// 							}
				// 						}
				// 					},
				// 	{
				// 		type: "user",
				// 		msg: {
				// 			id: 1,
				// 			type: "text",
				// 			time: "12:56",
				// 			userinfo: {
				// 				uid: 0,
				// 				username: "大黑哥",
				// 				face: "/static/img/face.jpg"
				// 			},
				// 			content: {
				// 				text: "为什么温度会相差那么大？"
				// 			}
				// 		}
				// 	},
				// 	{
				// 		type: "user",
				// 		msg: {
				// 			id: 2,
				// 			type: "text",
				// 			time: "12:57",
				// 			userinfo: {
				// 				uid: 1,
				// 				username: "售后客服008",
				// 				face: "/static/img/im/face/face_2.jpg"
				// 			},
				// 			content: {
				// 				text: "这个是有偏差的，两个温度相差十几二十度是很正常的，如果相差五十度，那即是质量问题了。"
				// 			}
				// 		}
				// 	},
				// 	{
				// 		type: "user",
				// 		msg: {
				// 			id: 3,
				// 			type: "voice",
				// 			time: "12:59",
				// 			userinfo: {
				// 				uid: 1,
				// 				username: "售后客服008",
				// 				face: "/static/img/im/face/face_2.jpg"
				// 			},
				// 			content: {
				// 				url: "/static/voice/1.mp3",
				// 				length: "00:06"
				// 			}
				// 		}
				// 	},
				// 	{
				// 		type: "user",
				// 		msg: {
				// 			id: 4,
				// 			type: "voice",
				// 			time: "13:05",
				// 			userinfo: {
				// 				uid: 0,
				// 				username: "大黑哥",
				// 				face: "/static/img/face.jpg"
				// 			},
				// 			content: {
				// 				url: "/static/voice/2.mp3",
				// 				length: "00:06"
				// 			}
				// 		}
				// 	},


				// ]
				// 获取消息中的图片,并处理显示尺寸
				for (let i = 0; i < list.length; i++) {
					if (list[i].type == 'user' && list[i].msg.type == "img") {
						list[i].msg.content = this.setPicSize(list[i].msg.content);
						this.msgImgList.push(list[i].msg.content.url);
					}
				}
				this.msgList = list;
				// 滚动到底部
				this.$nextTick(function() {
					//进入页面滚动到底部
					this.scrollTop = 9999;
					this.$nextTick(function() {
						this.scrollAnimation = true;
					});

				});
			},
			//处理图片尺寸，如果不处理宽高，新进入页面加载图片时候会闪
			setPicSize(content) {
				// 让图片最长边等于设置的最大长度，短边等比例缩小，图片控件真实改变，区别于aspectFit方式。
				let maxW = uni.upx2px(350); //350是定义消息图片最大宽度
				let maxH = uni.upx2px(350); //350是定义消息图片最大高度
				if (content.w > maxW || content.h > maxH) {
					let scale = content.w / content.h;
					content.w = scale > 1 ? maxW : maxH * scale;
					content.h = scale > 1 ? maxW / scale : maxH;
				}
				return content;
			},

			//更多功能(点击+弹出) 
			showMore() {
				this.isVoice = false;
				this.hideEmoji = true;
				if (this.hideMore) {
					this.hideMore = false;
					this.openDrawer();
				} else {
					this.hideDrawer();
				}
			},
			// 打开抽屉
			openDrawer() {
				this.popupLayerClass = 'showLayer';
			},
			// 隐藏抽屉
			hideDrawer() {
				this.popupLayerClass = '';
				setTimeout(() => {
					this.hideMore = true;
					this.hideEmoji = true;
				}, 150);
			},
			// 选择图片发送
			chooseImage() {
				this.getImage('album');
			},
			//拍照发送
			camera() {
				this.getImage('camera');
			},
			//发红包
			handRedEnvelopes() {
				uni.navigateTo({
					url: 'HM-hand/HM-hand'
				});
				this.hideDrawer();
			},
			//选照片 or 拍照
			getImage(type) {
				let filesNmae = 'nmoBackground_01.png'; // this.timeDate + 'png'
				this.hideDrawer();
				uni.chooseImage({
					sourceType: [type],
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: (res) => {
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							uni.getImageInfo({
								src: res.tempFilePaths[i],
								success: (image) => {
									console.log(image.width);
									console.log(image.height);
									this.imgWidth = image.width
									this.imgHeight = image.height
									uni.uploadFile({
										url: this.$api.upload,
										filePath: res.tempFilePaths[i],
										name: 'file' || this.fileName,
										formData: {


											getContentType: ['image/png', 'image/jpeg'],
											getoriginalfilename: filesNmae,
											getName: filesNmae
										},
										header: null,
										success: uploadRes => {
											console.log('uploadRes-------------',
												uploadRes, 'this.formData', this
												.formData,
												'this.uploadServerUrl', this
												.uploadServerUrl);
											/* 阿里云上传 */


											/* 七牛云上传 */
											uploadRes = JSON.parse(uploadRes.data);

											if (uploadRes.code != 0) {
												// console.log('进入失败uploadRes', uploadRes);
												uni.showToast({
													title: '上传失败 : ' +
														uploadRes.data,
													icon: 'none'
												});
												this.error(index);
											} else {
												this.$websocket.sendMessage({
													from: this.userInfo.id,
													to: this.uid,
													content: uploadRes.data
														.url,
													type: 'img',
													imgWidth: image.width,
													imgHeight: image.height
												})
												// this.socket1.send(JSON.stringify({
												// 	from: this.userInfo.id,
												// 	to: this.uid,
												// 	content: uploadRes.data
												// 		.url,
												// 	type: 'img',
												// 	imgWidth: image.width,
												// 	imgHeight: image.height
												// }));

												let msg = {
													url: uploadRes.data.url,
													w: image.width,
													h: image.height
												};
												this.sendMsg(msg, 'img');
											}

										},
										fail: e => {
											uni.showToast({
												title: '上传失败，请点击图片重试',
												icon: 'none'
											});
											this.error(index);
										}
									});



								}
							});
						}
					}
				});
			},


			// 选择表情
			chooseEmoji() {
				this.hideMore = true;
				if (this.hideEmoji) {
					this.hideEmoji = false;
					this.openDrawer();
				} else {
					this.hideDrawer();
				}
			},
			//添加表情
			addEmoji(em) {
				this.textMsg += em.alt;
			},

			//获取焦点，如果不是选表情ing,则关闭抽屉
			textareaFocus() {
				if (this.popupLayerClass == 'showLayer' && this.hideMore == false) {
					this.hideDrawer();
				}
			},
			// 发送文字消息
			async sendText() {

				// this.socket1.send(JSON.stringify({
				// 	from: this.userInfo.id,
				// 	to: this.uid,
				// 	content: this.textMsg,
				// 	type: 'text'
				// }));

				if (this.userInfo.disable == 0) {
					this.$sun.toast('当前用户已被拉黑', 'none')
				} else {
					this.hideDrawer(); //隐藏抽屉
					if (!this.textMsg) {
						return;
					}
					let content = this.replaceEmoji(this.textMsg);
					let msg = {
						text: content
					}

					let results
					let result
					const ress = await this.$http.post({
						url: this.$api.msgSecCheck,
						data: {
							openid: this.openid,
							scene: 2,
							content: content

						},
						headers: {
							// 'Authorization': this.userInfo.token
						}

					})

					console.log(JSON.parse(ress.data).errcode)

					// results=this.msgSecCheck(20001)
					if (JSON.parse(ress.data).errcode == 0) {
						console.log(JSON.parse(ress.data).result.label)
						results = this.msgSecCheck(JSON.parse(ress.data).result.label)
					} else {
						this.$sun.toast(JSON.parse(ress.data).errmsg, 'none')
						return false
					}
					if (results == 'pass') {

						this.$websocket.sendMessage({
							from: this.userInfo.id,
							to: this.uid,
							content: this.replaceEmoji(this.textMsg),
							type: 'text'
						})


						this.sendMsg(msg, 'text');
						this.textMsg = ''; //清空输入框
						this.$nextTick(function() {
							//进入页面滚动到底部
							this.scrollTop = 9999;
							this.$nextTick(function() {
								this.scrollAnimation = true;
							});

						});
					}
				}
			},
			msgSecCheck(label) {
				if (label == 10001) {
					uni.showModal({
						title: '提示',
						content: '输入的内容涉及敏感内容，请检查后重新输入(广告)',
						success: async (res) => {
							if (res.confirm) {


							} else if (res.cancel) {

							}
						}
					});
				} else if (label == 20001) {
					uni.showModal({
						title: '提示',
						content: '输入的内容涉及敏感内容，请检查后重新输入(时政)',
						success: async (res) => {
							if (res.confirm) {


							} else if (res.cancel) {

							}
						}
					});
				} else if (label == 20002) {
					uni.showModal({
						title: '提示',
						content: '输入的内容涉及敏感内容，请检查后重新输入(色情)',
						success: async (res) => {
							if (res.confirm) {


							} else if (res.cancel) {

							}
						}
					});
				} else if (label == 20003) {
					uni.showModal({
						title: '提示',
						content: '输入的内容涉及敏感内容，请检查后重新输入(辱骂)',
						success: async (res) => {
							if (res.confirm) {


							} else if (res.cancel) {

							}
						}
					});
				} else if (label == 20006) {
					uni.showModal({
						title: '提示',
						content: '输入的内容涉及敏感内容，请检查后重新输入(违法犯罪)',
						success: async (res) => {
							if (res.confirm) {


							} else if (res.cancel) {

							}
						}
					});
				} else if (label == 20008) {
					uni.showModal({
						title: '提示',
						content: '输入的内容涉及敏感内容，请检查后重新输入(欺诈)',
						success: async (res) => {
							if (res.confirm) {


							} else if (res.cancel) {

							}
						}
					});
				} else if (label == 20012) {
					uni.showModal({
						title: '提示',
						content: '输入的内容涉及敏感内容，请检查后重新输入(低俗)',
						success: async (res) => {
							if (res.confirm) {


							} else if (res.cancel) {

							}
						}
					});
				} else if (label == 20013) {
					uni.showModal({
						title: '提示',
						content: '输入的内容涉及敏感内容，请检查后重新输入(版权)',
						success: async (res) => {
							if (res.confirm) {


							} else if (res.cancel) {

							}
						}
					});
				} else if (label == 21000) {
					uni.showModal({
						title: '提示',
						content: '输入的内容涉及敏感内容，请检查后重新输入(其他)',
						success: async (res) => {
							if (res.confirm) {


							} else if (res.cancel) {

							}
						}
					});
				} else if (label == 100) {
					return 'pass'
				}

			},
			//替换表情符号为图片
			replaceEmoji(str) {
				let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
					console.log("item: " + item);
					for (let i = 0; i < this.emojiList.length; i++) {
						let row = this.emojiList[i];
						for (let j = 0; j < row.length; j++) {
							let EM = row[j];
							if (EM.alt == item) {
								//在线表情路径，图文混排必须使用网络路径，请上传一份表情到你的服务器后再替换此路径 
								//比如你上传服务器后，你的100.gif路径为https://www.xxx.com/emoji/100.gif 则替换onlinePath填写为https://www.xxx.com/emoji/
								let onlinePath = 'https://s2.ax1x.com/2019/04/12/'
								let imgstr = '<img src="' + onlinePath + this.onlineEmoji[EM.url] + '">';
								console.log("imgstr: " + imgstr);
								return imgstr;
							}
						}
					}
				});
				return '<div style="display: flex;align-items: center;word-wrap:break-word;">' + replacedStr + '</div>';
			},

			// 发送消息
			sendMsg(content, type) {
				let lastid
				//实际应用中，此处应该提交长连接，模板仅做本地处理。
				var nowDate = new Date();
				if (this.msgList.length) {
					lastid = this.msgList[this.msgList.length - 1].msg.id;
				}
				console.log(this.msgList)
				lastid++;
				let msg = {
					type: 'user',
					msg: {
						id: lastid,
						time: nowDate.getHours() + ":" + nowDate.getMinutes(),
						type: type,
						userinfo: {
							uid: this.userInfo.id,
							username: this.userInfo.nickname,
							face: this.userInfo.avatar,
						},
						content: content
					}
				}
				// 发送消息
				this.screenMsg(msg);

			},

			// 添加文字消息到列表
			addTextMsg(msg) {
				this.msgList.push(msg);
			},
			// 添加语音消息到列表
			addVoiceMsg(msg) {
				this.msgList.push(msg);
			},
			// 添加图片消息到列表
			addImgMsg(msg) {
				msg.msg.content = this.setPicSize(msg.msg.content);
				this.msgImgList.push(msg.msg.content.url);
				this.msgList.push(msg);
			},
			addRedEnvelopeMsg(msg) {
				this.msgList.push(msg);
			},
			// 添加系统文字消息到列表
			addSystemTextMsg(msg) {
				this.msgList.push(msg);
			},
			// 添加系统红包消息到列表
			addSystemRedEnvelopeMsg(msg) {
				this.msgList.push(msg);
			},
			// 打开红包
			openRedEnvelope(msg, index) {
				let rid = msg.content.rid;
				uni.showLoading({
					title: '加载中...'
				});
				console.log("index: " + index);
				//模拟请求服务器效果
				setTimeout(() => {
					//加载数据
					if (rid == 0) {
						this.redenvelopeData = {
							rid: 0, //红包ID
							from: "大黑哥",
							face: "/static/img/im/face/face.jpg",
							blessing: "恭喜发财，大吉大利",
							money: "已领完"
						}
					} else {
						this.redenvelopeData = {
							rid: 1, //红包ID
							from: "售后客服008",
							face: "/static/img/im/face/face_2.jpg",
							blessing: "恭喜发财",
							money: "0.01"
						}
						if (!msg.content.isReceived) {
							// {type:"system",msg:{id:8,type:"redEnvelope",content:{text:"你领取了售后客服008的红包"}}},
							this.sendSystemMsg({
								text: "你领取了" + (msg.userinfo.uid == this.myuid ? "自己" : msg.userinfo
									.username) + "的红包"
							}, 'redEnvelope');
							console.log("this.msgList[index]: " + JSON.stringify(this.msgList[index]));
							this.msgList[index].msg.content.isReceived = true;
						}
					}
					uni.hideLoading();
					this.windowsState = 'show';

				}, 200)

			},
			// 关闭红包弹窗
			closeRedEnvelope() {
				this.windowsState = 'hide';
				setTimeout(() => {
					this.windowsState = '';
				}, 200)
			},
			sendSystemMsg(content, type) {
				let lastid = this.msgList[this.msgList.length - 1].msg.id;
				lastid++;
				let row = {
					type: "system",
					msg: {
						id: lastid,
						type: type,
						content: content
					}
				};
				this.screenMsg(row)
			},
			//领取详情
			toDetails(rid) {
				uni.navigateTo({
					url: 'HM-details/HM-details?rid=' + rid
				})
			},
			// 预览图片
			showPic(msg) {
				uni.previewImage({
					indicator: "none",
					current: msg.content.url,
					urls: this.msgImgList
				});
			},
			// 播放语音
			playVoice(msg) {
				this.playMsgid = msg.id;
				this.AUDIO.src = msg.content.url;
				this.$nextTick(function() {
					this.AUDIO.play();
				});
			},
			// 录音开始
			voiceBegin(e) {
				if (e.touches.length > 1) {
					return;
				}
				this.initPoint.Y = e.touches[0].clientY;
				this.initPoint.identifier = e.touches[0].identifier;
				this.RECORDER.start({
					format: "mp3"
				}); //录音开始,
			},
			//录音开始UI效果
			recordBegin(e) {
				this.recording = true;
				this.voiceTis = '松开 结束';
				this.recordLength = 0;
				this.recordTimer = setInterval(() => {
					this.recordLength++;
				}, 1000)
			},
			// 录音被打断
			voiceCancel() {
				this.recording = false;
				this.voiceTis = '按住 说话';
				this.recordTis = '手指上滑 取消发送'
				this.willStop = true; //不发送录音
				this.RECORDER.stop(); //录音结束
			},
			// 录音中(判断是否触发上滑取消发送)
			voiceIng(e) {
				if (!this.recording) {
					return;
				}
				let touche = e.touches[0];
				//上滑一个导航栏的高度触发上滑取消发送
				if (this.initPoint.Y - touche.clientY >= uni.upx2px(100)) {
					this.willStop = true;
					this.recordTis = '松开手指 取消发送'
				} else {
					this.willStop = false;
					this.recordTis = '手指上滑 取消发送'
				}
			},
			// 结束录音
			voiceEnd(e) {
				if (!this.recording) {
					return;
				}
				this.recording = false;
				this.voiceTis = '按住 说话';
				this.recordTis = '手指上滑 取消发送'
				this.RECORDER.stop(); //录音结束
			},
			//录音结束(回调文件)
			recordEnd(e) {
				clearInterval(this.recordTimer);
				if (!this.willStop) {
					console.log("e: " + JSON.stringify(e));
					let msg = {
						length: 0,
						url: e.tempFilePath
					}
					let min = parseInt(this.recordLength / 60);
					let sec = this.recordLength % 60;
					min = min < 10 ? '0' + min : min;
					sec = sec < 10 ? '0' + sec : sec;
					msg.length = min + ':' + sec;
					this.sendMsg(msg, 'voice');
				} else {
					console.log('取消发送录音');
				}
				this.willStop = false;
			},
			// 切换语音/文字输入
			switchVoice() {
				this.hideDrawer();
				this.isVoice = this.isVoice ? false : true;
			},
			discard() {
				return;
			}
		}
	}
</script>
<style lang="scss">
	@import "@/static/HM-chat/css/style.scss";

	.serviceItemsContain {
		margin-top: -40rpx;
		padding: 20rpx;
		background-color: #fff;


		.avatar {
			width: 104rpx;
			height: 104rpx;
			border-radius: 50%;
		}

		.picture {
			width: 132rpx;
			height: 132rpx;
			border-radius: 12rpx;
			margin-right: 10rpx;

		}

		.viewMore {
			box-sizing: border-box;
			border: 2rpx solid rgb(183, 183, 183);
			border-radius: 51px;
			width: 148rpx;
			height: 56rpx;
			background: rgb(255, 255, 255);
		}

		.scroll-Y {
			height: 300rpx;
		}

		.scroll-view_H {
			white-space: nowrap;
			width: 78%;
		}

		.uni-bg-red {
			background-color: red;
		}

		.uni-bg-green {
			background-color: green;
		}

		.uni-bg-blue {
			background-color: blue;
		}

		.scroll-view-item {
			height: 300rpx;
			line-height: 300rpx;
			text-align: center;
			font-size: 36rpx;
		}

		.scroll-view-item_H {
			display: inline-block;
			margin-right: 10rpx;

			text-align: center;
			font-size: 36rpx;

			.albumIcon {
				width: 132rpx;
				height: 132rpx;
			}

			.release {

				width: 90rpx;
				height: 40rpx;
				line-height: 36rpx;
				;
				margin: auto;
				font-size: 20rpx;
				border-radius: 4rpx;
				border: 2rpx solid #1E6CEB;
				color: #FFF;
				background: #1E6CEB;
			}
		}
	}
</style>